<template>
  <div class="season-info">
    <div
      class="season-data"
      v-loading="loading"
      element-loading-text="正在加载数据..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="total-performance">
        <div class="total-performance-text">赛季总览</div>
      </div>
      <div class="goal-assist-minutes">
        <div class="season-goal">
          <div class="season-data-left-number">{{ playerData.goals }}</div>
          <div class="season-data-text">进球</div>
        </div>
        <div class="goal-assist-block"></div>
        <div class="season-assists">
          <div class="season-data-right-number">{{ playerData.assists }}</div>
          <div class="season-data-text">助攻</div>
        </div>
        <div class="season-appearance">
          <div class="season-data-left-number">{{ playerData.appearance }}</div>
          <div class="season-data-text">出场</div>
        </div>
        <div class="goal-assist-block"></div>
        <div class="season-minutes">
          <div class="season-data-right-number">{{ playerData.minutes }}</div>
          <div class="season-data-text">出场时间(分钟)</div>
        </div>
      </div>
      <div class="radar-pic">
        <PlayerRadar :player-score="getRadarData" />
      </div>
      <div class="yellow-red-card">
        <div class="yellow-card">{{ playerData.yellowCard }}</div>
        <div class="red-card">{{ playerData.redCard }}</div>
      </div>
      <div class="card-text">
        <div class="yellow-card-text">黄牌</div>
        <div class="red-card-text">红牌</div>
      </div>
    </div>
    <div class="career-data">
      <div class="career-title">
        <span>职业生涯</span>
      </div>
      <div class="career-league">
        <CareerTable :playerId="playerId" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import PlayerRadar from "../../ant_v/radarScore/PlayerRadar";
import CareerTable from "./CareerTable";
export default {
  name: "PersonalInfo",
  props: {
    playerId: {
      type: Number,
    },
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  components: {
    PlayerRadar,
    CareerTable,
  },
  watch: {
    playerId: {
      handler(newPlayerId) {
        this.getPlayerData(parseInt(this.season), newPlayerId);
      },
    },
    season: {
      handler(newSeasonId) {
        this.getPlayerData(parseInt(newSeasonId), this.playerId);
      },
    },
  },
  data() {
    return {
      loading: true,
      playerData: {},
      radarItem: [
        "attackScore",
        "defenseScore",
        "organizeScore",
        "passScore",
        "skillScore",
      ],
    };
  },
  methods: {
    //获取赛季的进球数据
    async getPlayerData(seasonId, playerId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/playerfeatures/${seasonId}/${playerId}`
      );
      this.playerData = data[0];
      this.loading = false;
    },

    //选中不同赛季切换数据
    selectSeason(season) {
      const seasonId = parseInt(season);
      this.getPlayerData(seasonId, this.playerId);
    },
  },
  computed: {
    //获取雷达数据的数组
    getRadarData() {
      const radar = [];
      this.radarItem.forEach((item) => {
        let obj = {};
        obj.item = item;
        obj.score = this.playerData[item] * 100;
        radar.push(obj);
      });
      return radar;
    },
  },
  created() {},
};
</script>

<style scoped>
.season-info {
  display: flex;
  justify-content: space-between;
  width: 1440px;
  height: 710px;
  margin: 30px auto 0;
  /*background-color: red;*/
}
.season-data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 370px;
  height: 100%;
  background-color: #194568;
}
.career-data {
  width: 1060px;
  height: 100%;
  background-color: #f1f6f9;
}
.total-performance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  /*background-color: red;*/
}
.total-performance-text {
  color: #16c79a;
  font-weight: bold;
  font-size: 28px;
  width: 50%;
}
.selector-season /deep/ .el-input {
  width: 80%;
}
.selector-season /deep/ .el-input__inner {
  height: 30px;
}
.goal-assist-minutes {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
  height: 230px;
  /*background-color: orange;*/
}
.season-goal {
  /*width: 174px;*/
  width: 45%;
  height: 110px;
  /*border-right: 1px solid #FFFFFF;*/
  /*background-color: darkcyan;*/
}
.season-data-left-number {
  width: 100%;
  height: 60%;
  text-align: center;
  /*background-color: red;*/
  font-size: 68px;
  color: white;
  line-height: 58px;
  font-weight: bold;
  /*border-right: 2px solid white;*/
}
.season-data-right-number {
  width: 100%;
  height: 60%;
  text-align: center;
  /*background-color: red;*/
  font-size: 68px;
  color: white;
  line-height: 58px;
  font-weight: bold;
}
.season-data-text {
  height: 40%;
  line-height: 27px;
  /*text-align: right;*/
  color: white;
  font-size: 19px;
  font-weight: bold;
  /*background-color: blue;*/
}
.goal-assist-block {
  margin-bottom: 48px;
  width: 2px;
  height: 60px;
  background-color: white;
}
.season-assists {
  /*width: 174px;*/
  width: 45%;
  height: 110px;
  /*border-left: 1px solid #FFFFFF;*/
  /*background-color: deeppink;*/
}
.season-appearance {
  /*width: 174px;*/
  width: 45%;
  height: 110px;
  /*background-color: aqua;*/
}
.season-minutes {
  /*width: 174px;*/
  width: 45%;
  height: 110px;
  /*background-color: orange;*/
}
.radar-pic {
  width: 100%;
  height: 297px;
  margin-top: 10px;
  /*background-color: pink;*/
}
.yellow-red-card {
  display: flex;
  margin-top: 10px;
  width: 100%;
  height: 60px;
  /*background-color: firebrick;*/
}
.yellow-card {
  margin-left: 70px;
  color: black;
  width: 40px;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
  font-size: 28px;

  background-color: #fcdd11;
}
.red-card {
  margin-left: 150px;
  color: black;
  width: 40px;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
  font-size: 28px;
  background-color: #fa1427;
}
.card-text {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  /*background-color: pink;*/
}
.yellow-card-text {
  margin-left: 50px;
  width: 80px;
  line-height: 30px;
  height: 100%;
  font-size: 20px;
  font-weight: bold;
  color: white;
  /*background-color: red;*/
}
.red-card-text {
  margin-left: 110px;
  width: 80px;
  height: 100%;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  /*background-color: indigo;*/
}
.career-title {
  width: 100%;
  height: 50px;
  color: #16c79a;
  font-weight: bold;
  font-size: 28px;
  line-height: 50px;
  background-color: #194568;
}
.career-title > span {
  float: left;
  margin-left: 30px;
}
.career-league {
}
</style>
